<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta http-equiv="Pragma" content="no-cache"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="css/biaoqian.css"/>
 		<link rel="stylesheet" href="css/swiper.min.css">	
		<script>!function (e) { function t(a) { if (i[a]) return i[a].exports; var n = i[a] = { exports: {}, id: a, loaded: !1 }; return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports } var i = {}; return t.m = e, t.c = i, t.p = "", t(0) }([function (e, t) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); var i = window; t["default"] = i.flex = function (e, t) { var a = e || 100, n = t || 1, r = i.document, o = navigator.userAgent, d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i), l = o.match(/U3\/((\d+|\.){5,})/i), c = l && parseInt(l[1].split(".").join(""), 10) >= 80, p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi), s = i.devicePixelRatio || 1; p || d && d[1] > 534 || c || (s = 1); var u = 1 / s, m = r.querySelector('meta[name="viewport"]'); m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u), r.documentElement.style.fontSize = a / 2 * s * n + "px" }, e.exports = t["default"] }]);
        flex(100, 1);
		</script>
		<style>
			.kuang{
			}
			.kuai{		
			    height: 75%;
			    width: 85%;
			    margin: 5% 7.5% 0 7.5%;
			}
			.log{
			    margin-top: 10%;
				height: 14%;
			}
			.log img{		
			    width: 50%;
			    margin-left: 5%; 
			}
			.btn{
			    position: absolute;
			    right: 15%;
			    top: 1em;
			    display: block;
			    width: 0.7em;
			    height: 0.7em;
				background: url(img/btn.png) no-repeat;
				background-size: 100% 100%;
			}
			.btn:hover{
			    position: absolute;
			    right: 15%;
			    top: 1em;
			    display: block;
			    width: 0.7em;
			    height: 0.7em;
				background: url(img/btn_1.png) no-repeat;
				background-size: 100% 100%;
			}
			.kuai p{
				float: left;
			    font-size: 0.32em;
			    color: white;
			    letter-spacing: 3px;
			    font-weight: 100;
			    padding-top: 3%;
			    margin-left: 5%;
				opacity:0.4;
			}
			.kuai p:first-child{
				float: left;
				text-align: center;
				font-size: 0.45em;
				color: white;
				letter-spacing: 5px;
			    padding-top: 0;
			    margin-left: 0;
				opacity:1;
			}
			.kuai p:last-child{
				font-size: 0.32em;
				color: white;
			    padding-top: 0;
			    margin-left: 0;
				opacity:1;
			}
			.kuai b{
				float: left;
				width: 100%;
				font-size: 0.28em;
				color: white;
				letter-spacing: 2px;
			    padding-top: 0;
			    margin: 3% 0;
				opacity:1;
				font-weight: 100;
				font-style: oblique;
			}
		    .swiper-container {
		      width: 100%;
		      height: 100%;
		    }
		    .swiper-slide {
			    height: auto;
			    box-sizing: border-box;
			    padding-bottom: 10%;
		    }
		    .swiper-pagination{
		    	width: 100% !important;
		    	margin-top: 1%;
		    }
		    .swiper-wrapper{
		    	height: 85%;
		    }
		    .swiper-pagination-bullet{
		    	width: 26px;
		    	height: 8px;
		    }
		    .swiper-tu {
				margin: 0 auto;
				position: relative;
				overflow: hidden;
				list-style: none;
				padding: 0;
				z-index: 1;
				width: 100%;
				height: 4em;
		    }
		    .tu{
		    	height: 4em;
		    }
		</style>
	</head>
	<body>
			<div class="swiper-container">
			    <div class="swiper-wrapper">
			    	<div class="swiper-slide">
			    		<div class="log">
									<img src="img/logo.png" />
							</div>
							<a class="btn" href="javascript:void(0);" onclick="javascript:history.back(-1);"></a>
							<div class="kuai">
								<p>金钱松</p>
								<p>松科/Pinaceae</p>
								<b>Pseudolarix amabilis  (Nels.) Rehd.</b>
								<a class="kunchong">昆虫</a>
								<img style="float: left; width: 100%; margin: 7% 0;" src="img/tiao.png"/>
								
								
								<p>
								　　暂无详细介绍
								</p>
							</div>
						</div>
			    	</div>
			    </div>
			    <!-- Add Scroll Bar -->
			    <div class="swiper-scrollbar"></div>
		
			
		
		<script src="js/swiper.min.js"></script>
		<script>
		    var swiper = new Swiper('.swiper-tu', {
		      pagination: {
		        el: '.swiper-pagination',
		        dynamicBullets: true,
		      },
		    });
		    var swiper = new Swiper('.swiper-container', {
		      direction: 'vertical',
		      slidesPerView: 'auto',
		      freeMode: true,
		      scrollbar: {
		        el: '.swiper-scrollbar',
		      },
		      mousewheel: true,
		    });
		</script>
	</body>
</html>

